<template>
    <div class="form-block-inner">
        <Form :model="formItem" label-position="top" ref="baseForm">
            <Alert>
               <span class="title-head">设定规则
                   <Tooltip :content="tipTitle"  placement="right" theme="light" max-width="200" :transfer="true">
                       <Icon type="md-help-circle" class="excel-help"/>
                   </Tooltip>
               </span>
            </Alert>
            <div v-for="(item,index) in dataList" :key="index">
                <Row :gutter="16">
                    <Col span="10">
                        <FormItem class="required" label="规则内容：" prop="gz_content">
                            <Input v-model="item.gz_content" placeholder="请填写规则内容"></Input>
                        </FormItem>
                    </Col>
                    <Col span="10">
                        <FormItem class="required" prop="node" label="请选择流程节点:">
                            <Select v-model="item.node" filterable multiple>
                                <Option v-for="(item2,index) in nodeList" :value="item2.id" :key="index">{{
                                    item2.node_title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="3">
                        <FormItem label=" " class="col-last-btn">
                            <Button @click="delAction(index)" type="error" shape="circle" icon="md-close"></Button>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="10">
                        <FormItem class="required" prop="gz_type" label="规则类型:">
                            <RadioGroup v-model="item.gz_type">
                                <Radio label="1">必要</Radio>
                                <Radio label="2">联合</Radio>
                                <Radio label="3">附加</Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                    <Col span="10">

                        <FormItem label="规则依据：" prop="gz_yi_ju">
                            <Input v-model="item.gz_yi_ju" type="textarea" :autosize="{minRows: 2,maxRows: 3}"
                                   placeholder="请填写规则依据的文件内容"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row v-if="item.gz_type == 2">
                    <Col span="20">
                        <FormItem class="required" label="联合规则：" prop="lh_yi_ju">
                            <Input v-model="item.lh_yi_ju" type="textarea" :autosize="{minRows: 2,maxRows: 3}"
                                   placeholder="选择联合时,请填写不同规则间的关联关系"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Divider class="mt10"/>
            </div>
            <Row v-if="nodeList.length >0">
                <Col span="24">
                    <Button type="success" @click="add">添加</Button>
                </Col>
            </Row>
        </Form>
        <div class="btn-style" v-if="nodeList.length >0">
            <common-save-btn :base-info-id="baseInfoId" :form-data="dataList" dbName="GovRule"></common-save-btn>
        </div>
    </div>
</template>

<script>
import CommonSaveBtn from '@/components/common-save-btn/index'
import { select } from '@/api/setting'

export default {
  name: 'RuleSetting',
  components: { CommonSaveBtn },
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    tabName: {
      type: String,
      default: () => {
        return ''
      }
    },
    baseInfoId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  computed: {
    getUploadUrl () {
      return this.$config.upLoadFileUrl
    }
  },
  data () {
    return {
      formItem: {},
      dataList: [],
      nodeList: [],
      tipTitle: '指事项各个节点上报、审核或审批时应该遵循的规则。'
    }
  },
  methods: {
    init () {
      if (this.tabName === '13') {
        let param = { base_info_id: this.baseInfoId }
        select('GovRule', param).then(res => {
          this.loading = false
          if (res.data.errcode === 0) {
            for (let i = 0; i < res.data.data.length; i++) {
              res.data.data[i].node = res.data.data[i].gov_flow_id.split(',')
            }
            this.dataList = this.$common.xeUtils.clone(res.data.data)
          } else {
            this.$Message.error('数据获取失败!')
          }
        }).catch(ret => {
          this.loading = false
          // this.$Message.error(res)
        })
      }
    },
    add () {
      this.dataList.push({ gov_base_id: this.$route.query.id })
    },
    delAction (index) {
      this.dataList.splice(index, 1)
    }
  },
  mounted () {
    this.nodeList = this.options
  },
  watch: {
    options (data) {
      this.nodeList = data
    },
    tabName (data) {
      this.init()
    },
    baseInfoId (data) {
      this.baseInfoId = data
    },
    dataList (data) {
      this.dataList = data
      // this.$emit('result', data)
    }
    // dataList (data) {
    //   this.$emit('result', data)
    // }
  }
}
</script>

<style scoped lang="less">
    .btn-style {
        margin-top: 5px;
    }

    .tag-box {
        margin-bottom: 10px;
    }

    .wl-float-left {
        float: left;
    }

    .row-m-t {
        margin-bottom: 10px;
    }

    .mr10 {
        margin-right: 10px;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .col-last-btn {
        float: right;
        margin-right: 40px;
    }

    .required /deep/.ivu-form-item-label:before {
        content: '*';
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
    }
    .title-head{
        font-weight: bold;
        font-size: 16px;
    }
    .excel-help {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
        color: orange;
        cursor: pointer;
    }
    /deep/ .ivu-alert{
        margin-bottom: 25px;
    }
</style>
